<!-- 用例日志步骤信息，递归展示日志详情 -->
<template>
  <div>
    <b class="STEP">步骤描述：{{ reportStep.step }}</b>
    <ul>
      <li v-for="(content, index_1) in reportStep.contents" :key="index_1">
        <div v-if="content.contentType === 'LOG'" :class="content.level">
          [{{ content.level }}] {{ content.value }}
          <br>
          <a v-if="content.type === 'PIC'" :href="getImgUrl(content.value)" target="_blank">
            <img class="logImg" :src="getImgUrl(content.value)">
          </a>
        </div>
        <div v-if="content.contentType === 'STEP'">
          <log-content :report-step="content" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LogContent',
  props: {
    reportStep: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style scoped="scoped">
  .STEP {
    color: #ff00ff;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .INFO {
    color: #00ff00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .DEBUG {
    color: #00ff00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .WARN {
    color: #dede00;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;padding: 5px, 0px;
  }

  .ERROR {
    color: #ff0000;
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .logImg {
    border-style: solid;
    border-width: 1px;
    height: 250px;
  }
</style>
